<template>
  <div>
    <h4 class="font-weight-bold py-3 mb-4">
      <span class="text-muted font-weight-light">风控主体结果 /</span> 预警结果
    </h4>

    <hr class="border-light container-m--x mt-0 mb-5">
		<b-modal id="modals-default" :size="defaultModalSize">
      <div slot="modal-title">
        Payment <span class="font-weight-light">Information</span><br>
        <small class="text-muted">We need payment information to process your order.</small>
      </div>

      <b-form-row>
        <b-form-group label="Card number" class="col">
          <b-input placeholder="XXXX XXXX XXXX XXXX" />
        </b-form-group>
      </b-form-row>
      <b-form-row>
        <b-form-group label="Expiration date" class="col mb-0">
          <b-input placeholder="DD / MM" />
        </b-form-group>
        <b-form-group label="Card holder" class="col mb-0">
          <b-input placeholder="Name on card" />
        </b-form-group>
      </b-form-row>
    </b-modal>
    <v-client-table :data="tableData" :columns="columns" :options="options">
      <template slot="操作" slot-scope="props">
        <div>
          <b-btn variant="outline-success borderless icon-btn" class="btn-xs" @click.prevent="edit(props.row)"><i class="ion ion-md-create"></i></b-btn>
          <b-btn variant="outline-danger borderless icon-btn" class="btn-xs" @click.prevent="remove(props.row)"><i class="ion ion-md-close"></i></b-btn>
        </div>
      </template>
    </v-client-table>
  </div>
</template>

<style src="@/vendor/libs/vue-data-tables/vue-data-tables.scss" lang="scss"></style>
<style src="@/vendor/libs/sweet-modal-vue/sweet-modal-vue.scss" lang="scss"></style>

<script>
import Vue from 'vue'
import {ClientTable} from 'vue-tables-2'
import { SweetModal, SweetModalTab } from 'sweet-modal-vue'

Vue.use(ClientTable)

export default {
  name: 'tables-vue-tables-2',
  metaInfo: {
    title: 'Vue Tables 2 - Tables'
  },
  components: {
    SweetModal,
    SweetModalTab
  },
  data: () => ({
    tableData: [],
    columns: ['打分卡名称', '应用对象', '基本分数', '备注','状态', '操作'],
    options: {
      pagination: { chunk: 5 },
      filterable:false,
      perPageValues:[],
      sortIcon: {
        is: 'fa-sort',
        base: 'fas',
        up: 'fa-sort-up',
        down: 'fa-sort-down'
      }
    },
    sizes: [
      { text: 'Small', value: 'sm' },
      { text: 'Medium', value: null },
      { text: 'Large', value: 'lg' }
    ],
    defaultModalSize: null,
    topModalSize: null,
    fillInModalSize: null,
    icons: {
      beaker: '<i class="ion ion-ios-flask text-big"></i>',
      fork: '<i class="ion ion-md-git-branch text-big"></i>',
      heart: '<i class="ion ion-ios-heart text-big"></i>'
    }
  }),
  created () {
    // Fetch json data
    const req = new XMLHttpRequest()
    req.open('GET', '/static/json/scorecard-data.json')

    req.onload = () => {
      const data = JSON.parse(req.response)

      // Add IDs for child rows functionality
      this.tableData = data.map((item, index) => {
        item['id'] = index
        return item
      })
    }

    req.send()
  },
  methods: {
    edit (row) {
      this.$router.push('/settings/scorecard/cardItem/list') 
      // this.$router.push({ name: '/settings/scorecard/cardItem/list', params: { todo: "todo" }}) 
    },
    remove (row) {
      alert(`Remove: ${row.first_name} ${row.last_name}`)
    },
    showSlideModal () {
      this.$refs.slideModal.show()
    },
    hideSlideModal () {
      this.$refs.slideModal.hide()
    }
  }
  
  
}

</script>
